<div class="breadCrumb clearfix">    
    <ul id="breadcrumbs">
        <li><a href="index-2.html">Home</a></li>
        <li><a href="#">Sample pages</a></li>
        <li><a href="#">Mailbox</a></li>
        <li>Inbox</li>
    </ul>        
</div>

<div class="content">

    <div class="middle">
        
            <div class="button tip" title="New mail">
                <a href="#" id="openMailModal">
                    <span class="icomg-mail"></span>
                    <span class="text">New mail</span>
                </a>                    
            </div>            

            <div class="button tip" title="Inbox">
                <a href="#">
                    <span class="icomg-box-add"></span>
                    <span class="text">Inbox<br/>2/1,981</span>                        
                </a>                    
            </div>            

            <div class="button tip" title="Outbox">
                <a href="#">
                    <span class="icomg-box-remove"></span>
                    <span class="text">Outbox<br/>2,193</span>
                </a>                    
            </div>                        

            <div class="button tip" title="Spam">
                <a href="#">
                    <span class="icomg-comments4"></span>
                    <span class="text">Spam<br/>9,315</span>
                </a>                                        
            </div>                                    

            <div class="button tip" title="Removed">
                <a href="#">
                    <span class="icomg-remove"></span>
                    <span class="text">Removed<br/>441</span>
                </a>                    
            </div>                                     
        
    </div>
    
    <div class="row-fluid">
                    
        <div class="span9">
            
            <div class="widget">                    
                <div class="head dark">
                    <div class="icon"><span class="icos-box-add"></span></div>
                    <h2>Inbox</h2>
                </div>                                                 
                <div class="toolbar">
                    <div class="left">
                        <div class="btn-group">
                            <button class="btn btn-small btn-primary tip" title="Forward"><span class="icon-share-alt icon-white"></span></button>
                            <button class="btn btn-small btn-primary tip" title="Reply"><span class="icon-arrow-right icon-white"></span></button>
                            <button class="btn btn-small btn-warning tip" title="Spam"><span class="icon-warning-sign icon-white"></span></button>
                        </div> 
                        <button class="btn btn-small btn-danger tip" title="Remove"><span class="icon-trash icon-white"></span></button>
                        
                        <div class="btn-group">                                
                            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">More <span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Forward all</a></li>
                                <li><a href="#">Reply to all</a></li>                                    
                                <li class="divider"></li>
                                <li><a href="#">Mask as unread</a></li>
                                <li><a href="#">Mask as read</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="right TAR">
                        <button class="btn btn-small"><span class="icon-book"></span> Contacts</button>
                    </div>
                </div>
                <div class="block-fluid">
                    
                    <table class="table-hover mailbox" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <th><input type="checkbox" class="checkall"/></th>
                                <th width="25%">From</th>
                                <th width="55%">Subject</th>
                                <th width="10%">Date</th>
                                <th width="10%">Attachment</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="new">
                                <td><input type="checkbox" name="checkbox"/></td>
                                <td><img src="/images/examples/users/alexey_m.jpg" class="img-polaroid" align="left"/> <a href="#" class="name">Alexey</a> <a href="#">alexey@domain.com</a></td>
                                <td><a href="#" class="subject">Phasellus ut diam quis dolor mollis tristique.</a></td>
                                <td>16:32</td>
                                <td>12 Kb</td>
                            </tr>
                            <tr class="new">
                                <td><input type="checkbox" name="checkbox"/></td>
                                <td><img src="/images/examples/users/olga_m.jpg" class="img-polaroid" align="left"/> <a href="#" class="name">Olga</a> <a href="#">olga@domain.com</a></td>
                                <td><a href="#" class="subject">Cras nec risus dolor, ut tristique neque.</a></td>
                                <td>12:26</td>
                                <td>64 Kb</td>
                            </tr>                                    
                            <tr>
                                <td><input type="checkbox" name="checkbox"/></td>
                                <td><img src="/images/examples/users/helen_m.jpg" class="img-polaroid" align="left"/> <a href="#" class="name">Helen</a> <a href="#">helen@domain.com</a></td>
                                <td><a href="#" class="subject">Diam quis dolor mollis tristique.</a></td>
                                <td>20.12.2012</td>
                                <td>54 Kb</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="checkbox"/></td>
                                <td><img src="/images/examples/users/valentin_m.jpg" class="img-polaroid" align="left"/> <a href="#" class="name">Valentin</a> <a href="#">valentin@domain.com</a></td>
                                <td><a href="#" class="subject">Quis dolor mollis tristique.</a></td>
                                <td>20.12.2012</td>
                                <td>88 Kb</td>
                            </tr>       
                            <tr class="heading">
                                <td colspan="5">Last week</td>
                            </tr>   
                            <tr>
                                <td><input type="checkbox" name="checkbox"/></td>
                                <td><img src="/images/examples/users/dmitry_m.jpg" class="img-polaroid" align="left"/> <a href="#" class="name">Dmitry</a> <a href="#">dmitry@domain.com</a></td>
                                <td><a href="#" class="subject">Re:Re:Re:Lorem ipsum dolor sit</a></td>
                                <td>19.12.2012</td>
                                <td>64 Kb</td>
                            </tr>                                    
                            <tr>
                                <td><input type="checkbox" name="checkbox"/></td>
                                <td><img src="/images/examples/users/dmitry_m.jpg" class="img-polaroid" align="left"/> <a href="#" class="name">Dmitry</a> <a href="#">dmitry@domain.com</a></td>
                                <td><a href="#" class="subject">Re:Re:Lorem ipsum dolor sit</a></td>
                                <td>19.12.2012</td>
                                <td>54 Kb</td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="checkbox"/></td>
                                <td><img src="/images/examples/users/dmitry_m.jpg" class="img-polaroid" align="left"/> <a href="#" class="name">Dmitry</a> <a href="#">dmitry@domain.com</a></td>
                                <td><a href="#" class="subject">Re:Lorem ipsum dolor sit</a></td>
                                <td>18.12.2012</td>
                                <td>88 Kb</td>
                            </tr>                                       
                            <tr>
                                <td><input type="checkbox" name="checkbox"/></td>
                                <td><a href="#" class="name">John</a> <a href="#">johndoe@domain.com</a></td>
                                <td><a href="#" class="subject">Some text here, can u see?</a></td>
                                <td>17.12.2012</td>
                                <td>88 Kb</td>
                            </tr>                                                                       
                        </tbody>
                    </table>
                    
                </div>
                <div class="toolbar bottom">
                    <div class="left">
                        <div class="btn-group">
                            <button class="btn btn-small btn-primary tip" title="Forward"><span class="icon-share-alt icon-white"></span></button>
                            <button class="btn btn-small btn-primary tip" title="Reply"><span class="icon-arrow-right icon-white"></span></button>
                            <button class="btn btn-small btn-warning tip" title="Spam"><span class="icon-warning-sign icon-white"></span></button>
                        </div> 
                        <button class="btn btn-small btn-danger tip" title="Remove"><span class="icon-trash icon-white"></span></button>
                        
                        <div class="btn-group">                                
                            <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">More <span class="caret"></span></button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Forward all</a></li>
                                <li><a href="#">Reply to all</a></li>                                    
                                <li class="divider"></li>
                                <li><a href="#">Mask as unread</a></li>
                                <li><a href="#">Mask as read</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="right">
                        <div class="pagination pagination-right pagination-mini">
                            <ul>
                                <li class="disabled"><a href="#">&laquo;</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li class="disabled"><span>...</span></li>                    
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">6</a></li>
                                <li><a href="#">&raquo;</a></li>
                            </ul>
                        </div>                              
                    </div>
                    
                </div>
            </div>
            
        </div>
        <div class="span3">     
                            
            <div class="widget">
                <div class="wrapper">
                    <div class="input-append input-prepend">                            
                        <input type="text" placeholder="Find your mail..."/>
                        <button class="btn btn-primary" type="button">Search</button>                            
                    </div>             
                </div>
            </div>
            
            <div id="datepicker"></div>
        </div>
        
    </div>        
    
    
</div>  

<div class="dialog-fluid" id="sendMailModal" style="display: none;" title="Send mail">
    <div class="row-fluid">            
        <div class="toolbar inside">
            <div class="left">
                <button class="btn btn-primary"><span class="icon-share-alt icon-white"></span> Send mail</button>
            </div>
            <div class="right">
                <button class="btn">Save</button>
            </div>
        </div>
        <div class="block-fluid">
            <div class="row-form">
                <div class="span12">
                    <span class="top title">From:</span>
                    <select name="from">
                        <option value="dmitry@domain.com">dmitry@domain.com</option>
                        <option value="0">...</option>
                    </select>
                </div>
            </div>                    
            <div class="row-form">
                <div class="span12">
                    <span class="top title">To:</span>
                    <input type="text" class="tags" name="to" value="john@domain.com,olga@domain.com,alexey@domain.com"/>
                </div>
            </div>
            <div class="row-form">
                <div class="span12">
                    <span class="top title">Attachment:</span>
                    <div class="input-append file">
                        <input type="file" name="file"/>
                        <input type="text"/>
                        <button class="btn">Browse</button>
                    </div>
                </div>
            </div>   
        </div>
        <textarea name="text" id="mail_wysiwyg"></textarea>            
    </div>                           
</div>         